{% extends 'base.html' %}

{% block title %}首页 - 校园技能交换平台{% endblock %}

{% block content %}
<div class="jumbotron py-5 bg-light rounded-3">
    <div class="container">
        <h1 class="display-4">欢迎来到校园技能交换平台</h1>
        <p class="lead">在这里，你可以分享你的技能，寻找你需要的帮助。让我们一起互帮互助，共同成长！</p>
        <hr class="my-4">
        <p>还没有账号？立即加入我们的平台！</p>
        {% if not user.is_authenticated %}
        <a class="btn btn-primary btn-lg" href="{% url 'listings:register' %}" role="button">立即注册</a>
        {% else %}
        <a class="btn btn-primary btn-lg" href="{% url 'listings:skill_create' %}" role="button">发布技能</a>
        <a class="btn btn-outline-primary btn-lg ms-2" href="{% url 'listings:need_create' %}" role="button">发布需求</a>
        {% endif %}
    </div>
</div>

<div class="row mt-5">
    <div class="col-md-6">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">最新技能</h5>
                <a href="{% url 'listings:skill_list' %}" class="btn btn-sm btn-outline-primary">查看全部</a>
            </div>
            <div class="list-group list-group-flush">
                {% for skill in latest_skills %}
                <a href="{% url 'listings:skill_detail' skill.id %}" class="list-group-item list-group-item-action">
                    <div class="d-flex w-100 justify-content-between">
                        <h6 class="mb-1">{{ skill.title }}</h6>
                        <small class="text-muted">{{ skill.created_at|date:"Y-m-d" }}</small>
                    </div>
                    <p class="mb-1 text-truncate">{{ skill.description }}</p>
                    <small class="text-muted">提供者: {{ skill.provider.username }} | 分类: {{ skill.get_category_display }}</small>
                </a>
                {% empty %}
                <div class="list-group-item">暂无技能发布</div>
                {% endfor %}
            </div>
        </div>
    </div>
    
    <div class="col-md-6">
        <div class="card">
            <div class="card-header d-flex justify-content-between align-items-center">
                <h5 class="mb-0">最新需求</h5>
                <a href="{% url 'listings:need_list' %}" class="btn btn-sm btn-outline-primary">查看全部</a>
            </div>
            <div class="list-group list-group-flush">
                {% for need in latest_needs %}
                <a href="{% url 'listings:need_detail' need.id %}" class="list-group-item list-group-item-action">
                    <div class="d-flex w-100 justify-content-between">
                        <h6 class="mb-1">{{ need.title }}</h6>
                        <small class="text-muted">{{ need.created_at|date:"Y-m-d" }}</small>
                    </div>
                    <p class="mb-1 text-truncate">{{ need.description }}</p>
                    <small class="text-muted">发布者: {{ need.requester.username }} | 分类: {{ need.get_category_display }}</small>
                </a>
                {% empty %}
                <div class="list-group-item">暂无需求发布</div>
                {% endfor %}
            </div>
        </div>
    </div>
</div>

<div class="row mt-5">
    <div class="col-md-4">
        <div class="card text-center">
            <div class="card-body">
                <h5 class="card-title">技能总数</h5>
                <p class="card-text display-4">{{ skill_count }}</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card text-center">
            <div class="card-body">
                <h5 class="card-title">需求总数</h5>
                <p class="card-text display-4">{{ need_count }}</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card text-center">
            <div class="card-body">
                <h5 class="card-title">用户总数</h5>
                <p class="card-text display-4">{{ user_count }}</p>
            </div>
        </div>
    </div>
</div>
{% endblock %} 